.speechListFormWrapper{
    background: #0047FF url('/img/speech/grad-cap.png') no-repeat right center;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 110px;
    margin-top: 48px;
    margin-bottom: 48px;
}
.speechFormEntity .contentForm{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.speechFormEntity .contentForm h3{
    color: #FFF;
    font-size: 45px;
    font-weight: 400;
    line-height: 52px;
}
.speechFormEntity.speechFormPopup .contentForm h3{
    font-size: 32px;
    line-height: 40px;
}
.speechFormEntity .contentForm p{
    color: #FFF;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}

.speechFormEntity.speechFormPopup .contentForm p{
    font-size: 16px;
    line-height: 22px;
}
.speechForm{
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 416px;
    flex-shrink: 0;
}
.speechForm input{
    color: #191B25;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
    height: 56px;
    padding: 0 24px;

    border-radius: 28px;
    border: 1px solid #CCC;
    background: #FFF;
    outline: none;
    outline-offset: -2px;
    width: 100%;
}
.speechForm input:hover{
    border: 1px solid #808080;
}
.speechForm input:focus{
    border: 1px solid #80A3FF;
    outline: 3px solid #80A3FF;
}
.speechForm input.errorInput{
    border: 1px solid #FCC;
    outline: 3px solid #FCC;
    color: #EB4747;
}
.speechForm .speechInputGroup{
    margin-bottom: 12px;
    width: 100%;
    position: relative;
}

.speechForm input::placeholder{
    color: rgba(25, 27, 37, 0.50);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.speechForm button{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #3E4C66;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;

    border-radius: 100px;
    background: #ADFF00;

    outline: none;
    border: none;
    width: 100%;
}
.speechForm button:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.speechForm p{
    width: 100%;
    color: #FFF;
    font-size: 12px;
    font-weight: 400;
    line-height: 140%; /* 16.8px */
    letter-spacing: 0.24px;
    margin: 0;
}

.speechForm p a{
    font-size: inherit;
    color: #FF0;
    text-decoration-line: underline;
}

.speechFormPopup{
    position: fixed;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, .3);
}
.speechFormPopupWrapper{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    flex-direction: row;
}
.speechRequest{
    background: #0047FF url('/img/speech/grad-cap.png') no-repeat right center;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    width: 420px;
    position: relative;
    margin: auto;
}


.speechRequest .closeButton {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.speechRequest .closeButton::before,
.speechRequest .closeButton::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 30px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease; /* Плавное изменение при наведении */
}

.speechRequest .closeButton::before {
    transform: rotate(45deg);
    background-color: #ADFF00; /* Цвет линии */
    transition: transform 0.3s ease; /* Плавное изменение при наведении */
}

.speechRequest .closeButton::after {
    transform: rotate(-45deg);
    background-color: #FF0; /* Цвет линии */
    transition: transform 0.3s ease; /* Плавное изменение при наведении */
}

.speechRequest .closeButton:hover::before {
    transform: rotate(-45deg);
}

.speechRequest .closeButton:hover::after {
    transform: rotate(45deg);
}

.speechForm span.errorText{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #EB4747;
    padding: 2px 9px;
    background: white;
    border-radius: 6px;
    position: absolute;
    bottom: -15px;
    left: 15px;
    display: none;
}

.speechForm input.errorInput + span.errorText {
    display: inline-block;
}

.successSpeechForm{
    padding: 24px;
    display: none;
}
.successSpeechFormWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    width: 360px;
    border-radius: 30px;
    border: 1px solid #F2F2F2;
    background: #ffffffd4;
}
.successSpeechFormWrapper img{
    width: 64px;
    margin-bottom: 24px;
}

.successSpeechFormWrapper h3{
    color: #333;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    margin: 0 0 8px 0;
}
.successSpeechFormWrapper p{
    color: #333;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}
.formSpeechDetailWrapper .speechForm button{
    background: #0047FF;
    color: white;
}
.formSpeechDetailWrapper .speechForm p{
    color: #3E4C66;
}
.formSpeechDetailWrapper .speechForm p a{
    color: #0047FF;
}
.formSpeechDetailWrapper .speechForm{
    width: 360px;
}
@media (max-width: 1199px) {
    .speechFormEntity .contentForm h3{
        font-size: 32px;
        line-height: 38px;
    }
    .speechFormEntity .contentForm p{
        font-size: 16px;
        line-height: 24px;
    }
}
@media (max-width: 991px) {
    .speechFormEntity .contentForm h3{
        font-size: 28px;
        line-height: 36px;
    }
    .speechListFormWrapper{
        flex-direction: column;
        padding: 24px 135px;
        gap: 24px;
    }
    .speechListFormWrapper .speechForm{
        padding: 0;
    }
}
@media (max-width: 767px) {
    .speechListFormWrapper{
        padding: 24px 48px;
        margin: 24px 0;
    }
    .speechForm{
        width: 100%;
    }

}

@media (max-width: 575px) {
    .speechListFormWrapper{
        padding: 24px;
    }
    .formSpeechDetailWrapper .speechForm{
        width: 100%;
        padding: 24px 0;
    }
    .speechRequest{
        width: 100%;
        max-width: 420px;
    }
    .successSpeechFormWrapper{
        width: 320px;
    }
}